<template>
  <div class="register">
    <nav-bar :title="title"></nav-bar>
    <div class="content">
      <ul class="content-list">
        <li class="content-item">
          <img v-if="phone.length<=0" class="item-icon" src="../assets/img/ic_phone.png" alt>
          <img v-else class="item-icon" src="../assets/img/ic_phone_red.png" alt>
          <input
            type="text"
            placeholder="请输入手机号码"
            v-model="phone"
            @focus="focusChangeClearStatus('phone','phoneClear')"
            @blur="blurChangeClearStatus('phoneClear')"
         
          >
          <img :style="{'visibility':phoneClear ? 'visible':'hidden'}"
            v-if="phoneClear" class="item-clear" src="../assets/img/ic_clear.png" @touchstart="clearInput('phone')">
        </li>
        <li class="content-item">
          <img v-if="message.length<=0" class="item-icon" src="../assets/img/ic_message.png" alt>
          <img v-else class="item-icon" src="../assets/img/ic_message_red.png" alt>
          <input
            type="text"
            placeholder="请输入短信验证码"
            v-model="message"
            @focus="focusChangeClearStatus('message','messageClear')"
            @blur="blurChangeClearStatus('messageClear')"
          >
          <div class="code" v-if="phone.length<=0">获取验证码</div>
          <div class="code-red" v-else @click="getAuthCode" v-show="sendAuthCode">获取验证码</div>
          <div class="code-red"  v-show="!sendAuthCode">{{auth_time}}s后重获</div>
        </li>
        <li class="content-item">
          <img
            v-if="password.length<=0"
            class="item-icon item-lock"
            src="../assets/img/ic_lock.png"
          >
          <img v-else class="item-icon item-lock" src="../assets/img/ic_lock_red.png" alt>
          <input
            v-bind="{type:!eyeStatus?'password':'text'}"
            placeholder="新密码(6-15位数字、字母组合)"
            v-model="password"
            @focus="focusChangeClearStatus('password','passwordClear')"
            @blur="blurChangeClearStatus('passwordClear')"
          >
        </li>
        <li class="content-item">
          <img
            v-if="newpassword.length<=0"
            class="item-icon item-lock"
            src="../assets/img/ic_lock.png"
          >
          <img v-else class="item-icon item-lock" src="../assets/img/ic_lock_red.png" alt>
          <input
            v-bind="{type:!eyeStatus?'password':'text'}"
            placeholder="确认新密码"
            v-model="newpassword"
            @focus="focusChangeClearStatus('newpassword','newpasswordClear')"
            @blur="blurChangeClearStatus('newpasswordClear')"
          >
        </li>
      </ul>
        <div class="btn" v-if="phone.length>0 && password.length>0&&message.length>0" @click="logIn()">
           完成
        </div>
        <div class="btn" v-else style="background: rgba(221,51,51,0.50);">
            完成
        </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar";
import axios from 'axios'
import {forgot}from "../api/api.js"
import {forCode}from "../api/api.js"
import {Toast} from 'mint-ui' 
export default {
  components: {
    NavBar: NavBar
  },
  data() {
    return {
      title: "忘记密码",
      phone: "",
      password: "",
      message: "",
      newpassword: "",
      newpasswordClear: false,
      messageClear: false,
      passwordClear: false,
      phoneClear: false,
      eyeStatus: false,
      sendAuthCode:true,
      auth_time:0,
    };
  },
  watch:{
        phone(val){
            if(val.length>0){
                this.phoneClear = true;
            }else{
                this.phoneClear = false;
            }
        },
        password(val){
            if(val.length>0){
                this.passwordClear = true;
            }else{
                this.passwordClear = false;
            }
        },
        message(val){
            if(val.length>0){
                this.messageClear = true;
            }else{
                this.messageClear = false;
            }
        },
        newpassword(val){
            if(val.length>0){
                this.newpasswordClear = true;
            }else{
                this.newpasswordClear = false;
            }
        }
  },
  methods: {
    focusChangeClearStatus(val, clear) {
      if (this[val].length>=0) {
        this[clear] = true;
      } else {
        this[clear] = false;
      }
    },
    blurChangeClearStatus(clear) {
      this[clear] = false;
    },
    changeClearStatus(val, clear) {
      if (this[val].length >= 0) {
        this[clear] = true;
      } else {
        this[clear] = false;
      }
    },
    clearInput(val) {
      this[val] = "";
    },
    changeEyes() {
      this.eyeStatus = !this.eyeStatus;
    },
    getAuthCode:function () {
        if (!/^[\u4e00-\u9fa5a-zA-Z][0-9a-zA-Z_\u4e00-\u9fa5]{2,17}/.test(this.human)) {
            alert("昵称不正确");
        } else if (!/^1[123456789]\d{9}$/.test(this.phone)) {
            alert("手机号格式不正确");
        }
        else{
            forCode({
                phone: this.phone,
            }).then(res=>{
                this.sendAuthCode = false;
                this.auth_time = 10;
                var auth_timetimer =  setInterval(()=>{
                    this.auth_time--;
                    if(this.phone.length>0){
                        if(this.auth_time<=0){
                            this.sendAuthCode = true;
                            clearInterval(auth_timetimer);
                        }
                    }else{
                        this.sendAuthCode = true;
                    }
                }, 1000);
            })
        }
    },
    logIn() {
      if (!/^1[123456789]\d{9}$/.test(this.phone)) {
        alert("手机号格式不正确");
      }else if(!/^[a-zA-Z0-9]{6,15}$/.test(this.password)){
          Toast("请输入6到15位的登录密码")
      }else if(this.message.length!=6){
          alert("验证码格式不正确");
      }else if(this.password!=this.newpassword){
                Toast("两次输入的密码不一致，请重新输入")
                this.passwordb=""
      }else {
          forgot({
              loginName:this.phone,
              newPassword:this.newpassword,
              code:this.message
          }).then(res=>{
                    if(res.data.status.statusCode===0){
                        Toast('密码修改成功')
                    }
          })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.7rem;
  margin-top: 0.51rem;
  margin-bottom: 0.67rem;
  img {
    width: 0.7rem;
    height: 0.35rem;
  }
}
.content {
  padding: 0.5rem 0.33rem;
  .content-list {
    box-sizing: border-box;
    position: relative;
    .content-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.16rem;
      color: #333333;
      margin-bottom: 0.08rem;
      .item-icon {
        width: 0.2rem;
        height: 0.2rem;
      }
      .item-lock {
        width: 0.14rem;
        height: 0.12rem;
      }
      input {
        margin-left: 0;
        flex: 1;
        position: relative;
        border: none;
        appearance: none;
        border: 0;
        outline: none;
        font-size: 0.16rem;
        padding-left: 0.1rem;
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
      }
      input::-webkit-input-placeholder {
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        color: #cccccc;
        line-height: 0.16rem;
      }
      .item-clear {
        width: 0.42rem;
        height: 0.42rem;
        padding: 0.15rem;
        box-sizing: border-box;
      }
      .item-last {
        width: 0.42rem;
        height: 0.42rem;
        padding: 0.15rem;
        box-sizing: border-box;
      }
      .code {
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #999999;
        line-height: 0.14rem;
      }
      .code-red{
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #05A3FA;
        line-height: 0.14rem;
      }
      &::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 0.01rem;
        background: #ccc;
        bottom: 0;
        transform: scale(1, 0.5);
      }
    }
  }
  .btn {
    background: rgba(202, 39, 39, 1);
    border-radius: 0.04rem;
    font-size: 0.18rem;
    color: #fff;
    height: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.22rem;
    }
}
</style>


